{% extends 'layout.html' %}
{% load static %}
{% block css %}
    <style>
        .top-message-error {
            position: fixed;
            left: 0;
            right: 0;
            width: 200px;
            margin-left: auto;
            margin-right: auto;
            top: 0;
            text-align: center;
        }
    </style>
{% endblock %}

{% block content %}
    {% load color %}
    {% if messages %}
        <div class="top-message-error">
            {% for obj in messages %}
                <div class="alert alert-{{ obj.level_tag }}">
                    {{ obj.message }}
                </div>
            {% endfor %}
        </div>
    {% endif %}


    <div style="margin-bottom: 5px;" class="clearfix">
        <a href="{% url 'my_order_add' %}" class="btn btn-success">
            <span class="glyphicon glyphicon-plus-sign"></span> 创建订单
        </a>
    </div>
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>订单号</th>
            <th>视频地址</th>
            <th>数量</th>
            <th>价格</th>
            <th>原播放</th>
            <th>创建时间</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>

        <tbody>
        {% for row in paginator.queryset %}
            <tr>
                <td>{{ row.oid }}</td>
                <td>{{ row.url }}</td>
                <td>{{ row.count }}</td>
                <td>{{ row.real_price }}({{ row.price }})</td>
                <td>{{ row.old_view_count }}</td>
                <td>{{ row.create_date }}</td>
                <td>
                    <span class="btn btn-xs btn-{{ row.status|color }}">{{ row.get_status_display }}</span>
                </td>
                <td>
                    {% if row.status == 1 %}
                        <a href="{% url "my_order_cancle" row.id %}" class="btn btn-xs btn-danger">撤单</a>
                    {% else %}
                        -
                    {% endif %}

                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    <ul class="pagination">
        {{ paginator.html }}
    </ul>

{% endblock %}

{% block js %}
    <script>
        setTimeout(function () {
            $(".top-message-error").addClass("hide")
        }, 3000)
    </script>
{% endblock %}